<template>
  <div>
    <!-- 头 -->
    <MyHeader />
    <!-- 左侧边栏 -->
    <div class="leftSider">
      <el-card class="box-card">
        <el-menu default-active="0"
                 class="el-menu-vertical-demo">
          <el-menu-item index="0"
                        class="text item"
                        @click="select(0)">
            <i class="el-icon-document"></i>
            <span slot="title">全部</span>
          </el-menu-item>
          <el-menu-item :index="(index+1).toString()"
                        v-for="(item,index) in categoryList"
                        :key="item.id"
                        class="text item"
                        @click="select(item.id)">
            <i :class="item.avatar"></i>
            <span slot="title">{{item.name}}</span>
          </el-menu-item>
        </el-menu>
      </el-card>
    </div>
    <!-- 右侧边栏 -->
    <div class="rightSider">
      <el-card class="box-card article">
        <div slot="header"
             class="clearfix">
          <span>文章榜</span>
          <el-button style="float: right; padding: 3px 0"
                     type="text"
                     @click="change()">换一换</el-button>
        </div>
        <div v-for="(item,index) in rightList"
             :key="item.id"
             class="text item">

          <!-- 文章内容 -->
          <span :style="{ color: colors[index] }">{{index+1}}</span>
          <span>{{item.title}}</span>
        </div>
      </el-card>
      <el-card class="box-card author">
        <div slot="header"
             class="clearfix">
          <span>作者榜</span>
          <el-button style="float: right; padding: 3px 0"
                     type="text">换一换</el-button>
        </div>
        <div v-for="o in 4"
             :key="o"
             class="text item">
          {{'列表内容 ' + o }}
        </div>
      </el-card>

      <el-card class="box-card topic">
        <div slot="header"
             class="clearfix">
          <span>推荐话题</span>
          <el-button style="float: right; padding: 3px 0"
                     type="text">换一换</el-button>
        </div>
        <div v-for="o in 4"
             :key="o"
             class="text item">
          {{'列表内容 ' + o }}
        </div>
      </el-card>
    </div>

    <!-- 主要内容区域 -->
    <div class="main">
      <el-card class="box-card ">
        <div slot="header"
             class="clearfix">
          <el-menu :default-active="activeIndex.toString()"
                   active-text-color='#1e80ff'
                   class="el-menu-demo"
                   mode="horizontal"
                   @select="handleSelect"
                   text-color='#515767'
                   background-color='#ffffff'>
            <el-menu-item index="0">推荐</el-menu-item>
            <el-menu-item index="1">最新</el-menu-item>
          </el-menu>
        </div>
        <!-- 一个一个 -->
        <el-card class="me-area"
                 :body-style="{ padding: '16px' }"
                 v-for="item in mainList"
                 :key="item.id">
          <div class="me-article-header">
            <a @click="view(item.id)"
               class="me-article-title">{{item.title}}</a>

          </div>

          <div class="me-artile-description">
            {{item.summary}}
          </div>
          <div class="me-article-footer">
            <span class="me-article-author">
              <i class="me-icon-author"></i>&nbsp;{{item.authorName}}
            </span>
            <el-tag size="mini">{{item.categoryName}}</el-tag>
            <span class=" me-article-count">
              <i class="el-icon-edit"></i>&nbsp;{{item.commentCount}}
            </span>
            <span class=" me-article-count">
              <i class="el-icon-view"></i>&nbsp;{{item.viewCount}}
            </span>
            <span class="me-pull-right me-article-count">
              <i class="el-icon-time"></i>&nbsp;{{formatDate(item.createTime)}}
            </span>

          </div>
        </el-card>
      </el-card>
    </div>
  </div>
</template>

<script>
import MyHeader from "../components/MyHeader";
import CategoryApi from "../api/category";
import ArticleApi from "../api/article";
import { formatTime } from "../utils/time";

export default {
  name: "Home",
  components: { MyHeader },
  data() {
    return {
      // 左
      categoryList: "",
      // 右
      rightList: [],
      rightSearchObj: { pageNum: 1 },
      colors: [],
      // 主内容
      mainList: [],
      mainSearchObj: { pageNum: 1 },
      activeIndex: 1,
      creatTime: "",
      loading: false,
      finished: false,
    };
  },
  methods: {
    // 左
    select(id) {
      // 传递分类id
      this.updateData(id, 1);
    },
    categoryInit(){
       CategoryApi.list()
      .then((result) => {
        this.categoryList = result.data.list;
      })
      .catch((err) => {});
    },
    // 右
    init() {
      ArticleApi.list(this.rightSearchObj)
        .then((result) => {
          if (result.data.list.length > 0) {
            this.rightList = result.data.list;
          } else {
            this.$message("到底咯");
            this.rightSearchObj.pageNum=1;
          }
        })
        .catch((err) => {});
    },
    change() {
      this.rightSearchObj.pageNum += 1;
      this.init();
    },
    // 随机颜色
    generateRandomColors() {
      const spanCount = 10; // 设置Span标签的数量
      const randomColor = () => {
        return "#" + Math.floor(Math.random() * 16777215).toString(16); // 生成随机颜色
      };

      for (let i = 0; i < spanCount; i++) {
        this.colors.push(randomColor()); // 将随机颜色添加到colors数组中
      }
    },

    //main
    // 滚动到页面底部时，请求内容
    scrollBottom() {
      this.loading = false;
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      let clientHeight = document.documentElement.clientHeight;
      let scrollHeight = document.documentElement.scrollHeight;
      let bottomOfWindow = scrollTop + clientHeight >= scrollHeight - 4;
      if (scrollTop != 0 && bottomOfWindow && this.loading == false && this.finished == false) {
        console.log("底部了");
        this.loading = true;

        this.mainSearchObj.pageNum += 1;
        ArticleApi.list(this.mainSearchObj).then((res) => {
          if (res.code == 200) {
            this.loading = false;
            // this.list = result.data.list;
            this.mainList = this.mainList.concat(res.data.list); //追加数据
            if (res.data.list.length == 0) {
              //数据全部加载完成
              this.finished = true;
            } else {
              this.finished = false;
            }
          }
        });
      }
    },
    formatDate(datetime) {
      return formatTime(datetime);
    },
    handleSelect(index) {
      // 重置分页排序条件
      this.reset();
      this.mainSearchObj.sortWay = index;
      this.MainInit();
    },
    MainInit() {
      ArticleApi.list(this.mainSearchObj)
        .then((result) => {
          this.mainList = result.data.list;
        })
        .catch((err) => {});
    },

    updateData(queryKey, way) {
      // way1：分类
      if (way == 1) {
        if (queryKey == 0) {
          this.mainSearchObj.categoryId = null;
        } else {
          this.mainSearchObj.categoryId = queryKey;
        }
        // way2 key
      } else if (way == 2) {
        this.mainSearchObj.queryKey = queryKey;
      }
      this.reset();
      this.MainInit();
    },
    reset() {
      this.mainSearchObj.pageNum = 1;
      this.finished = false;
    },
  },
  created() {
    this.MainInit();
    this.init();
    this.categoryInit();
  },
  mounted() {
    this.generateRandomColors();
    //添加滚动事件，检测滚动到页面底部
    window.addEventListener("scroll", this.scrollBottom);
    // 调用方法，接收分类id
    // this.$bus.$on("updateData", this.updateData);
  },

  destroyed() {
    window.removeEventListener("scroll", this.scrollBottom);
  },
};
</script>
<style scoped>
.el-menu-item:hover{
  background-color: white !important;
  color:#1e80ff !important
}

/* 共同样式 */
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

/* 左侧边 */
.leftSider {
  position: fixed;
  left: 100px;
  top: 80px;
}

.leftSider .text {
  font-size: 16px;
}

.leftSider .item {
  height: 40px;
}

.leftSider .box-card {
  width: 200px;
}

/* 右侧边栏 */
.rightSider {
  z-index: 1;
}
.article {
  position: absolute;
  left: 1050px;
  top: 80px;
}
.author {
  position: absolute;
  left: 1050px;
  top: 420px;
}
.topic {
  position: absolute;
  left: 1050px;
  top: 760px;
}

.rightSider .text {
  font-size: 13px;
  font-weight: bold;
}

.rightSider .item {
  margin-bottom: 18px;
}

.rightSider .text span {
  padding-right: 10px;
}

.rightSider .box-card {
  width: 300px;
  height: 300px;
}

/* 主要区域 */
.me-article-header {
  /*padding: 10px 18px;*/
  padding-bottom: 10px;
}

.me-article-title {
  font-weight: 600;
}

.me-article-icon {
  padding: 3px 8px;
}

.me-article-count {
  color: #a6a6a6;
  padding-left: 14px;
  font-size: 13px;
}

.me-pull-right {
  float: right;
}

.me-artile-description {
  font-size: 13px;
  line-height: 24px;
  margin-bottom: 10px;
  height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.me-article-author {
  color: #a6a6a6;
  padding-right: 2px;
  font-size: 13px;
}

.main .el-tag {
  margin-left: 6px;
}

.main {
  position: absolute;
  left: 330px;
  top: 80px;
  z-index: 0;
}

.main .box-card {
  width: 690px;
}

.main .item {
  margin-top: 10px;
  margin-right: 40px;
  width: 10px;
  height: 10px;
}
</style>